User blog:King Dragonhoff/CSS Gradient Builder
__NOEDITSECTION__ The tools below can be used to build CSS gradients for backgrounds. Set how many stops that you would like, positions of the stops, colors, and direction/epicenter of the gradient to create a gradient. Pressing submit shows a preview of your gradient and the code for the background-image properties in multiple compatibilities. The stop positions are on a range of 0 to 100, so the start should be at 0 and the final stop should be at 100 unless you are making a repeating gradient. If you choose to make a repeating gradient, the gradient will start repeating after the last defined color stop, so if you want the repetitions to be closer together, put your last color stop at a low number. If you want fewer repetitions, put your last color stop at a high number. Tip: To prevent repeating gradients from abruptly changing colors, make sure the color of the last color stop matches the color of the first color stop. =Linear Gradient Builder= template = Gradient form = gradin result = gradout param = direction|Direction|To Bottom|select|To Bottom,To Top,To Right,To Left,To Bottom Right,To Bottom Left,To Top Right,To Top Left param = repeat|Repeating?|No|check|Yes,No param = stop1|Stop 1?|Yes|check|Yes,No param = stop2|Stop 2?|Yes|check|Yes,No param = stop3|Stop 3?|No|check|Yes,No param = stop4|Stop 4?|No|check|Yes,No param = stop5|Stop 5?|No|check|Yes,No param = stop6|Stop 6?|No|check|Yes,No param = stop7|Stop 7?|No|check|Yes,No param = stop8|Stop 8?|No|check|Yes,No param = stop9|Stop 9?|No|check|Yes,No param = pos1|Start Position|0|number|0-100 param = pos2|Stop 2 Position|0|number|0-100 param = pos3|Stop 3 Position|0|number|0-100 param = pos4|Stop 4 Position|0|number|0-100 param = pos5|Stop 5 Position|0|number|0-100 param = pos6|Stop 6 Position|0|number|0-100 param = pos7|Stop 7 Position|0|number|0-100 param = pos8|Stop 8 Position|0|number|0-100 param = pos9|Stop 9 Position|0|number|0-100 param = hue1|Stop 1 Color||color| param = hue2|Stop 2 Color||color| param = hue3|Stop 3 Color||color| param = hue4|Stop 4 Color||color| param = hue5|Stop 5 Color||color| param = hue6|Stop 6 Color||color| param = hue7|Stop 7 Color||color| param = hue8|Stop 8 Color||color| param = hue9|Stop 9 Color||color| Please wait for the form to load. Adjust the options and press Submit to see the changes. ---- =Radial Gradient Builder= template = Gradient2 form = grad2in result = grad2out param = direction|Epicenter|Center|select|Left Top,Center Top,Right Top,Left Center,Center,Right Center,Left Bottom,Center Bottom,Right Bottom param = shape|Shape|Circular|select|Circular,Elliptical param = repeat|Repeating?|No|check|Yes,No param = stop1|Stop 1?|Yes|check|Yes,No param = stop2|Stop 2?|Yes|check|Yes,No param = stop3|Stop 3?|No|check|Yes,No param = stop4|Stop 4?|No|check|Yes,No param = stop5|Stop 5?|No|check|Yes,No param = stop6|Stop 6?|No|check|Yes,No param = stop7|Stop 7?|No|check|Yes,No param = stop8|Stop 8?|No|check|Yes,No param = stop9|Stop 9?|No|check|Yes,No param = pos1|Start Position|0|number|0-100 param = pos2|Stop 2 Position|0|number|0-100 param = pos3|Stop 3 Position|0|number|0-100 param = pos4|Stop 4 Position|0|number|0-100 param = pos5|Stop 5 Position|0|number|0-100 param = pos6|Stop 6 Position|0|number|0-100 param = pos7|Stop 7 Position|0|number|0-100 param = pos8|Stop 8 Position|0|number|0-100 param = pos9|Stop 9 Position|0|number|0-100 param = hue1|Stop 1 Color||color| param = hue2|Stop 2 Color||color| param = hue3|Stop 3 Color||color| param = hue4|Stop 4 Color||color| param = hue5|Stop 5 Color||color| param = hue6|Stop 6 Color||color| param = hue7|Stop 7 Color||color| param = hue8|Stop 8 Color||color| param = hue9|Stop 9 Color||color| Please wait for the form to load. Adjust the options and press Submit to see the changes. Category:Blog posts